/*
  《Vue.js 版本飞机大战新冠病毒》
  - - - - - - - - - - - - - - - - - - 
  作者：阿峰
  网址：http://www.fongzz.com/vuejs-aircraft-fight-virus
  - - - - - - - - - - - - - - - - - - 
  2020年4月
*/ 
let data = {  

  // 天空
  sky: {
    w: $('#sky')[0].offsetWidth, // 宽
    h: $('#sky')[0].offsetHeight, // 高
  },  

  // Fighter aircraft
  // 战斗机
  f:{    
    x: 50, // 横坐标
    y: 50, // 纵坐标
    w: $('#f')[0].offsetWidth, // 宽
    h: $('#f')[0].offsetHeight, // 高
    bullets: [], // 所有的子弹
    bullets_amount: 0, // 子弹总数
    fire_sound: '../assets/sound/bullet_livon_0.13.mp3' // 开火音效
  },  
  
  // 定时器
  timers: [], 
  
  // 白云
  clouds: [],
  
  // 病毒
  virus: {
    arr: [], // 全体
    num: 0, // 编号，用于移除
    amount: 0, // 总数
    hited: 0, // 被击落数量
    hited_percent: 0, // 击落率
    hited_sound: '../assets/sound/爆炸.m4a'
  },


}

var app = new Vue({
  el: '#app',  
  data: data ,

  methods: {

    // 飞机移动
    touchmove(){

      let touch
      if(event.touches){
          touch = event.touches[0] // 移动浏览器，手机端
      }else {
          touch = event
      }

      this.f.x = touch.clientX - this.f.w / 2 // 改变飞机坐标
      this.f.y = touch.clientY - this.f.h - 20
    },
	
    // 射击
    bullet_fire(){
      this.f.bullets.push({
        x: this.f.x + 13 , // 在机头发射
        y: this.f.y - 10 ,
      })

      this.f.bullets_amount ++ // 子弹计数
      new Audio( this.f.fire_sound ).play() // 开火音效
    },

    // 子弹飞
    bullet_move(){
      for( let i = 0; i < this.f.bullets.length; i ++ ){
        let b = this.f.bullets[i]
        b.y -= 3 // 向上移动 3 

        // 越界移除
        if( b.y < 5 ){
          this.f.bullets.splice(i,1)
        }
      }
    },   

    init(){
    
      // 口罩脸 - 子弹
      this.timers.push( setInterval( this.bullet_fire, 400 ))
      this.timers.push( setInterval( this.bullet_move, 10 ))
      
      // 白云
      this.timers.push( setInterval( this.cloud_lunch, 2000 ))
      this.timers.push( setInterval( this.cloud_move, 500 ))

      // 病毒 - 敌机
      this.timers.push( setInterval( this.virus_lunch, 100 ))
      this.timers.push( setInterval( this.virus_move, 100 ))

    },

    // 白云出现
    cloud_lunch(){
      let ok = Math.ceil( Math.random() * 100 )
          // 一半的概率
      if( ok > 50 ){
        let x = Math.ceil( Math.random() * (this.sky.w - 260) )
        this.clouds.push( { x: x, y: 5 } )
      }
    },
        
    // 白云移动
    cloud_move(){
      for( let i = 0; i < this.clouds.length; i ++ ){
        let c = this.clouds[i]
        c.y += 20
            // 超界移除
        if( c.y > this.sky.h - 160 ){
          this.clouds.splice(i,1)
        }
      }
    },

    // 病毒出现
    virus_lunch(){
      let ok = Math.ceil( Math.random() * 100 )
    
      // 90% 的概率
      if( ok > 90 ){
        let x = Math.ceil( Math.random() * ( this.sky.w - 80 ) )
        this.virus.arr.push( { x: x, y: 5, num: ++ this.virus.num } )
        this.virus.amount ++
      }
    },
    
    // 病毒袭来
    virus_move(){
      for( let i = 0; i < this.virus.arr.length; i ++ ){
        let e = this.virus.arr[i]
        e.y += 10
    
        // 越界移除
        if( e.y > this.sky.h - 55 ){
          this.virus.arr.splice(i,1)
        }
      }
    }, 

  },



  mounted: function() {
    
    // 初始化
    this.init()
  },

  watch: {
  },

})

